<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品ID" />
      <!-- <el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品编号" /> -->
      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品名称" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
      @selection-change="handleSelectionChange">
      <el-table-column align="center" label="商品编号" prop="pid" />

      <el-table-column align="center" min-width="100" label="商品名称" prop="productName" />

      <el-table-column align="center" min-width="100" label="商品分类" prop="productTypeStr">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.productTypeStr || "-" }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" property="pic" label="封面图片">
        <template slot-scope="scope">
          <el-image :src="scope.row.pic" :preview-src-list="toPreview(scope.row, scope.row.pic)"
            style="width: 40px; height: 40px" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="商品详情" prop="description">
        <template slot-scope="scope">
          <el-dialog top="8vh" width="90%" :visible.sync="detailDialogVisible" title="商品详情">
            <div class="goods-detail-box" v-html="goodsDetail" />
          </el-dialog>
          <el-button type="primary" size="mini" @click="showDetail(scope.row.description)">查看</el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" label="价格" prop="price">
        <template slot-scope="scope">
          {{ scope.row.price + "元" }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否在售" prop="OnSale">
        <template slot-scope="scope">
          <el-switch :loading="saleChangeLoading" @change="handleSaleChange(scope.row)" v-model="scope.row.onSale"
            active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0">
          </el-switch>
          <!-- <el-tag :type="scope.row.onSale ? 'success' : 'error'">{{ scope.row.onSale ? '在售' : '未售' }}</el-tag> -->
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>
</template>


<script>
import { listGoods, deleteGoods, editGoods } from '@/api/goods'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { toPreview } from '@/utils/index'
import Cookies from 'js-cookie'

export default {
  name: 'GoodsList',
  components: { BackToTop, Pagination },
  data() {
    return {
      saleChangeLoading: false,
      toPreview,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        name: '',
        shopId: Cookies.get("shopId") || ""
      },
      goodsDetail: '',
      detailDialogVisible: false,
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //在售状态修改
    handleSaleChange(data) {
      data.saleChangeLoading = true
      console.log('data------------', data);
      let params = {
        pid: data.pid,
        onSale: data.onSale
      }
      editGoods(params).then(res => {
        if (res.code === 200) {
          this.$notify.success("更新成功")
          this.getList();
        } else {
          this.$message.error("系统异常，请联系管理员");
        }
      })
    },
    getList() {
      this.listLoading = true
      listGoods(this.listQuery).then(response => {
        console.log('===============', response.data);

        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCreate() {
      this.$router.push({ path: '/goods/create' })
    },
    handleUpdate(row) {
      console.log('row', row);
      this.$router.push({ path: '/goods/edit', query: { id: row.pid } })
    },
    showDetail(detail) {
      this.goodsDetail = detail
      this.detailDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确定删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteGoods(row.pid).then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        }).catch(response => {
          this.$notify.error({
            title: '失败',
            message: response.data.msg
          })
        })
      }).catch(() => { })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.batchDeleteArr = val
    },
    handleDeleteRows() {
      this.batchDeleteArr.forEach(row => this.handleDeleteEachRow(row))
      this.getList()
    },
    handleDeleteEachRow(row) {
      deleteGoods(row).then(response => {
        this.$notify.success({
          title: '成功',
          message: '删除成功'
        })
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.errmsg
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.filter-item {
  margin-left: 20px;
  vertical-align: initial;

  &.add {
    float: right;
  }
}

.table-expand {
  font-size: 0;
  padding-left: 60px;
}

.table-expand label {
  width: 100px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.gallery {
  width: 80px;
  margin-right: 10px;
}

.goods-detail-box img {
  width: 100%;
}
</style>